<template>
    <div
        class="login-container d-flex justify-content-center align-items-center"
    >
        <video
            class="bg-video"
            autoplay
            muted
            loop
            playsinline
            poster="@/assets/images/bg-video-poster.jpeg"
        >
            <source src="@/assets/video/bg-video.mp4" type="video/mp4" />
        </video>
        <div class="box-shadow p-5 rounded login-box">
            <el-form
                ref="ruleFormRef"
                label-position="left"
                :model="ruleForm"
                :rules="rules"
                class="login-form"
                @keyup.enter="submitForm(ruleFormRef)"
            >
                <el-form-item>
                    <div class="d-flex justify-content-center mb-3 fs-5 w-100">
                        <SvgIcon
                            name="game-controller"
                            width="32px"
                            height="32px"
                            class="me-2"
                        ></SvgIcon>
                        <div>插件管理系统</div>
                    </div>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input
                        v-model="ruleForm.username"
                        placeholder="请输入用户名"
                    />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        v-model="ruleForm.password"
                        placeholder="请输入密码"
                        type="password"
                        show-password
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="submitForm(ruleFormRef)"
                        :loading="loginBtnLoading"
                        class="w-100 mt-3"
                    >
                        登 录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { login, getUserInfo } from '@/api/user'
import type { FormInstance } from 'element-plus'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
import { TokenStorage, UserStorage } from '@/utils/localStorange.ts'
// import { debounce } from 'lodash'
// const usernameChange = debounce(async () => {
//
// }, 500)
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<any>({
    username: '',
    password: '',
})
const router = useRouter()

const rules = reactive<any>({
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})
const loginBtnLoading = ref(false)

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid: any) => {
        if (valid) {
            loginBtnLoading.value = true
            login(ruleForm)
                .then((res: any) => {
                    TokenStorage.set(res.data)
                    getUserData()
                    loginBtnLoading.value = false
                })
                .catch(() => {
                    loginBtnLoading.value = false
                })
        } else {
            ElNotification({
                title: '警告',
                message: '请输入用户名或密码',
                type: 'warning',
                duration: 2000,
            })
        }
    })
}

const getUserData = async () => {
    await router.push({ name: 'Home' })
    const res = await getUserInfo()
    if (res.code !== 1) return
    UserStorage.set(res.data)
    ElNotification({
        title: '登录成功',
        message: getTimeOfDay(res.data.username),
        type: 'success',
        duration: 2000,
    })
}

const getTimeOfDay = (username: string | undefined) => {
    const hour = new Date().getHours()
    let greeting = ''
    if (hour >= 5 && hour <= 11) {
        greeting = `早上好，${username}`
    } else if (hour >= 12 && hour <= 13) {
        greeting = `中午好，${username}`
    } else if (hour >= 14 && hour <= 17) {
        greeting = `下午好，${username}`
    } else {
        greeting = `晚上好，${username}`
    }
    return greeting
}
</script>

<style lang="scss" scoped>
.login-container {
    width: 100vw;
    height: 100vh;

    .bg-video {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100vw;
        height: 100vh;
        object-fit: cover;
    }

    .login-box {
        background-color: rgb(255 255 255 / 50%);
    }
}

.login-form {
    width: 280px;
}
</style>
